<script setup>
import { defineProps, onMounted, onBeforeMount, ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  tableConfig: {
    type: Array,
    default: () => [],
  },
  tableStripe: {
    type: Boolean,
    default: false,
  },
  tableSortable: {
    type: Boolean,
    default: false,
  },
  tableRowColors: {
    type: Array,
    default: () => [],
  },
  tableScrollInterval: {
    type: Number,
    default: 1000,
  },
  tableRowStyle: {
    type: Object,
    default: () => {},
  },
  tableHeadStyle: {
    type: Object,
    default: () => {},
  },
})
let tdata = props.tableData
let tr_color = props.tableRowColors
onBeforeMount(() => {})
const scrollContainer = ref(null)
onMounted(() => {
  // 动态设置 CSS 变量
  const root = document.documentElement
  root.style.setProperty('--vtcolor1', tr_color[0])
  root.style.setProperty('--vtcolor2', tr_color[1])
  root.style.setProperty('--vtinterval', props.tableScrollInterval + 'ms')
  root.style.setProperty('--vtfontcolor', props.tableRowStyle.color)
  root.style.setProperty('--vtfontsize', props.tableRowStyle.fontSize)
  root.style.setProperty('--vtfontheight', props.tableRowStyle.height)
  root.style.setProperty('--vtheadfontcolor', props.tableHeadStyle.color)
  root.style.setProperty('--vtheadfontsize', props.tableHeadStyle.fontSize)
  root.style.setProperty('--vtheadheight', props.tableHeadStyle.height)

  const scrollBody =
    scrollContainer.value.$refs.bodyWrapper.childNodes[0].childNodes[0].childNodes[0]

  setInterval(() => {
    tr_color.push(tr_color.shift())
    root.style.setProperty('--vtcolor1', tr_color[0])
    root.style.setProperty('--vtcolor2', tr_color[1])
    let tc_shift = tdata.shift()
    tdata.push(tc_shift)

    if (scrollBody) {
      scrollBody.scrollTop += scrollBody.clientHeight / props.tableData.length / 2 // 向上滚动一小段距离
      if (scrollBody.scrollTop >= scrollBody.scrollHeight - scrollBody.clientHeight) {
        scrollBody.scrollTop = 0 // 滚动到底部时重置
      }
    }
  }, props.tableScrollInterval)
})
</script>

<template>
  <v-table>
    <thead>
      <th v-for="item in tableConfig" :key="item" class="v_table_head">{{ item.label }}</th>
    </thead>
    <tbody>
      <tr v-for="item in tdata" :key="item" class="v_table_row">
        <!-- item对象中，‘_X_ROW_KEY’属性不需要显示 -->
        <td v-for="(value, key) in item" :key="key" v-show="key != '_X_ROW_KEY'">{{ value }}</td>
      </tr>
    </tbody>
  </v-table>
</template>

<style lang="scss" scoped>
:deep(.v_table_head) {
  color: var(--vtheadfontcolor);
  font-size: var(--vtheadfontsize);
  height: var(--vtheadheight);
  line-height: var(--vtheadheight);
}
:deep(.v_table_row) {
  color: var(--vtfontcolor);
  font-size: var(--vtfontsize);
  height: var(--vtfontheight);
  line-height: var(--vtfontheight);
}
:deep(.v_table_row:nth-child(odd)) {
  background-color: var(--vtcolor1);
}
:deep(.v_table_row:nth-child(even)) {
  background-color: var(--vtcolor2);
}
.v-table {
  width: 100%;
  height: 100%;
  // transition: all var(--vtinterval);
}
</style>
